<template>
	<view class="keyword">
		<view class="title">热门搜索</view>
		<view class="tag-list">
			<view v-for="(item, index) in hotList" :key="index"
				@click="clickTagHandler(item)" >
				{{item}}
			</view>
		</view>
		<view class="title space-between">
			<text>历史搜索</text>
			<text @click="clearHistory">清空</text>
		</view>
		<view class="tag-list">
			<view v-for="(item, index) in historyList" :key="index"
				@click="clickTagHandler(item)" >
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	const key = 'history_list'

	export default {
		data() {
			return {
				// 热门搜索关键词列表
				hotList: ['Java', 'Python', 'Vue.js', 'React', 'SpringBoot', 'SpringCloud'],
				historyList: uni.getStorageSync(key)
			}
		},

		methods: {
			clearHistory() {
				this.historyList = []
				uni.removeStorageSync(key)
			},

			clickTagHandler(content) {
				// #ifdef APP-PLUS
				// 获取当前webview对象
				const currentWebview = this.$mp.page.$getAppWebview()
				// 设置导航栏搜索框文本
				currentWebview.setTitleNViewSearchInputText(content)
				// #endif

				// #ifdef H5
				// 将提示内容清空
				const placeholder = document.querySelector('.uni-page-head-search-placeholder')
				placeholder.innerHTML = ''
				// 传递关键字给输入框
				const inputSearch = document.querySelector('.uni-input-input[type=search]')
				inputSearch.value = content
				// #endif

				this.$emit('doSearch', {value: content})
			}

		}
	}
</script>

<style lang="scss">
	// 关键词搜索区域样式
	.keyword {
		padding: 25rpx;  // 内边距
		.title {
			font-size: 30rpx;  // 字体大小
			color: #222222;    // 字体颜色
			text:last-child {
				color: #999;     // 最后一个文本颜色
			}
		}
		.tag-list {
			display: flex;           // 弹性布局
			flex-wrap: wrap;         // 换行显示
			margin-top: 20rpx;       // 上外边距
			margin-bottom: 60rpx;    // 下外边距
			view {
				font-size: 25rpx;        // 字体大小
				color: #999;             // 字体颜色
				border: 1rpx solid #999; // 边框
				border-radius: 8rpx;     // 圆角
				padding: 6rpx 15rpx;     // 内边距
				margin: 10rpx;           // 外边距
				overflow: hidden;        // 超出隐藏
				white-space: nowrap;     // 不换行
				text-overflow: ellipsis; // 省略号
			}
		}
	}
</style>
